<template>
  <el-form class="ContributePreviewMain" label-width="100px" :model="form" ref="formRef">
    <!-- 视频预览 -->
    <el-form-item label="视频预览">
      <div style="width: 100%; max-width: 640px; margin: 0 auto;">
        <video ref="videoPlayer" id="my-video" class="video-js vjs-default-skin" controls preload="auto"></video>
      </div>
    </el-form-item>

    <!-- 封面图片 -->
    <el-form-item label="封面">
      <el-upload
          class="cover-uploader"
          v-loading="isUploadingImg"
          action=""
          :show-file-list="false"
          :before-upload="beforeUpload"
          :http-request="handleUpload"
      >
        <img v-if="form.coverUrl" :src="UrlUtil.getFullImgUrl(form.coverUrl)" class="cover">
<!--        <img v-if="form.coverUrl" src="http://localhost:8080/cover_load/ba2a1ddd-2a98-49ac-8b0a-49735d48ae12.jpg" class="cover">-->
        <el-icon v-else class="cover-uploader-icon"><Plus /></el-icon>
      </el-upload>
    </el-form-item>

    <!-- 标题 -->
    <el-form-item label="标题" prop="title">
      <el-input v-model="form.title" placeholder="请输入视频标题" maxlength="80"></el-input>
    </el-form-item>

    <!-- 类型 -->
    <el-form-item label="类型" prop="type">
      <el-radio-group v-model="form.type">
        <el-radio label="自制">自制</el-radio>
        <el-radio label="转载">转载</el-radio>
      </el-radio-group>
    </el-form-item>

    <!-- 分类 -->
    <el-form-item label="分区" prop="category">
      <el-select v-model="form.category" placeholder="请选择分区">
        <el-option value="科技">科技</el-option>
        <el-option value="数码">数码</el-option>
        <!-- 其他分类选项 -->
      </el-select>
    </el-form-item>

    <!-- 简介 -->
    <el-form-item label="简介" prop="description">
      <el-input type="textarea" v-model="form.description" :rows="4" placeholder="请输入视频简介"></el-input>
    </el-form-item>

    <!-- 标签 -->
    <el-form-item label="标签">
      <el-tag
          v-for="tag in form.tagsList"
          :key="tag"
          closable
          @close="removeTag(tag)"
          style="margin-right: 10px;"
      >
        {{ tag }}
      </el-tag>
      <el-input
          v-if="inputVisible"
          ref="saveTagInput"
          v-model="inputValue"
          class="input-new-tag"
          size="small"
          @keyup.enter="handleInputConfirm"
          @blur="handleInputConfirm"
      />
      <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加标签</el-button>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitVideo">投稿</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { onMounted, reactive, ref, nextTick } from 'vue';
import UrlUtil from "@/utils/Url/Url.js";
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
import { UploadApi } from '@/api/uploadApi.js';
import { Plus } from '@element-plus/icons-vue';

const props = defineProps({
  videoUrl: String,
  coverUrl: String
})

// 使用一个表单对象来存储所有字段
const form = reactive({
  videoUrl: props.videoUrl,
  coverUrl: props.coverUrl,
  title: '',
  type: '自制',
  category: '科技',
  description: '',
  tagsList: []
});

const isUploadingImg = ref(false)

const saveTagInput = ref(null); // 添加标签ref
const inputVisible = ref(false);
const inputValue = ref('');
const videoPlayer = ref(null);
let player = null;

onMounted(() => {
  // 初始化 video.js 播放器
  nextTick(() => {
    player = videojs(videoPlayer.value, {
      sources: [{
        src: UrlUtil.getFullVideoUrl(form.videoUrl),
        type: 'video/mp4'
      }],
      fluid: true,
      aspectRatio: '16:9',
    });
  });
})

const removeTag = (tag) => {
  const index = form.tagsList.indexOf(tag);
  if (index > -1) {
    form.tagsList.splice(index, 1);
  }
}

const showInput = () => {
  inputVisible.value = true;
  nextTick(() => {
    saveTagInput.value.focus();
  });
}

const handleInputConfirm = () => {
  if (inputValue.value) {
    form.tagsList.push(inputValue.value);
  }
  inputVisible.value = false;
  inputValue.value = '';
}

// 确认投稿
const submitVideo = () => {
  console.log('测试投稿，处理投稿逻辑');
  console.log(form);
  const params = {
    url: form.videoUrl,
    videoTitle: form.title,
    videoIntro: form.description,
    videoCover: form.coverUrl,
    type: form.type,
    videoTags: form.tagsList,
    videoSection: form.category,//分区
  }
  UploadApi.contributeVideo(params)
  ElMessage.success('投稿成功');
}

// 封面上传
const beforeUpload = (file) => {
  const isJPGorPNG = file.type === 'image/jpeg' || file.type === 'image/png';
  const isLt2M = file.size / 1024 / 1024 < 20;

  if (!isJPGorPNG) {
    ElMessage.error('封面只能是 JPG 或 PNG 格式的图片!');
  }
  if (!isLt2M) {
    ElMessage.error('封面大小不能超过 20MB!');
  }
  return isJPGorPNG && isLt2M;
}

const handleUpload = async (options) => {
  isUploadingImg.value = true
  try {
    const res = await UploadApi.uploadVedioCover(options.file);
    form.coverUrl = res.data;
    console.log("form.coverUrl",form.coverUrl)
    ElMessage.success('封面上传成功');
    isUploadingImg.value = false;
  } catch (error) {
    ElMessage.error('封面上传失败');
    console.error(error);
    isUploadingImg.value = false;
  }
}


</script>

<style scoped>
.ContributePreviewMain {
  padding: 20px;
}

/* 确保父容器有足够的宽度 */
.ContributePreviewMain .el-form-item__content {
  width: 100%;
}

.video-js {
  width: 100%;
  height: auto;
}

/* 封面上传样式 */
.cover-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.cover-uploader .el-upload:hover {
  border-color: #409EFF;
}

.cover-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.cover {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
